<!DOCTYPE html>
<title>Test that touch events on the controls will not be seen by the video element.</title>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script src="media-controls.js"></script>
<video controls></video>
<script>
async_test(function(t) {
    var coords;
    var video = document.querySelector("video");

    video.onclick = t.unreached_func();
    video.ondblclick = t.unreached_func();
    video.ontouchstart = t.unreached_func();
    video.ontouchend = t.unreached_func();
    video.ontouchmove = t.unreached_func();

    video.onloadeddata = t.step_func_done(function() {
        // click the play button.
        touchMediaControl("play-button", true);

        // Click the current time display, which should not respond to events,
        // but should still capture them.
        touchMediaControl("current-time-display", true);

        // Click the timeline - this tests that multilevel shadow DOM elements work.
        touchMediaControl("timeline");

        // Check that the timeline also captures moves.
        eventSender.updateTouchPoint(0, coords[0] + 10, coords[1] + 10)
        eventSender.touchMove();
        eventSender.cancelTouchPoint(0);
    });

    function touchMediaControl(controlId, cancelTouchPoint) {
        coords = mediaControlsButtonCoordinates(video, controlId);
        eventSender.addTouchPoint(coords[0], coords[1]);
        eventSender.touchStart();
        eventSender.leapForward(100);
        eventSender.touchEnd();
        if (cancelTouchPoint)
            eventSender.cancelTouchPoint(0);
    }

    video.src = "content/test.ogv";
});
</script>